import React from 'react';
import { Card, Button, Space, Alert, App as AntdApp } from 'antd';
import { UserOutlined, PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { usePermission, PermissionGuard } from '@/hooks/usePermission';

const PermissionTestPage: React.FC = () => {
  const { message } = AntdApp.useApp();
  const {
    hasPermission,
    hasAnyPermission,
    hasAllPermissions,
    getUserPermissions,
    getUserRoles,
    permissionData
  } = usePermission();

  const handleButtonClick = (action: string) => {
    message.success(`执行操作: ${action}`);
  };

  return (
    <div style={{ padding: 24 }}>
      <Card title="权限测试页面" style={{ marginBottom: 24 }}>
        <Space direction="vertical" style={{ width: '100%' }} size="middle">
          <Alert
            message="当前用户权限信息"
            description={
              <div>
                <p><strong>用户名:</strong> {permissionData?.username}</p>
                <p><strong>角色:</strong> {getUserRoles().join(', ')}</p>
                <p><strong>权限列表:</strong></p>
                <ul>
                  {getUserPermissions().map(permission => (
                    <li key={permission}>{permission}</li>
                  ))}
                </ul>
              </div>
            }
            type="info"
            showIcon
          />
        </Space>
      </Card>

      <Card title="用户管理权限测试" style={{ marginBottom: 24 }}>
        <Space wrap>
          <PermissionGuard permission="system:user:list">
            <Button icon={<UserOutlined />} onClick={() => handleButtonClick('查看用户')}>
              查看用户
            </Button>
          </PermissionGuard>

          <PermissionGuard permission="system:user:create">
            <Button type="primary" icon={<PlusOutlined />} onClick={() => handleButtonClick('创建用户')}>
              创建用户
            </Button>
          </PermissionGuard>

          <PermissionGuard permission="system:user:edit">
            <Button icon={<EditOutlined />} onClick={() => handleButtonClick('编辑用户')}>
              编辑用户
            </Button>
          </PermissionGuard>

          <PermissionGuard permission="system:user:delete">
            <Button danger icon={<DeleteOutlined />} onClick={() => handleButtonClick('删除用户')}>
              删除用户
            </Button>
          </PermissionGuard>
        </Space>
      </Card>

      <Card title="角色管理权限测试" style={{ marginBottom: 24 }}>
        <Space wrap>
          <PermissionGuard permission="system:role:list">
            <Button icon={<UserOutlined />} onClick={() => handleButtonClick('查看角色')}>
              查看角色
            </Button>
          </PermissionGuard>

          <PermissionGuard permission="system:role:create">
            <Button type="primary" icon={<PlusOutlined />} onClick={() => handleButtonClick('创建角色')}>
              创建角色
            </Button>
          </PermissionGuard>

          <PermissionGuard permission="system:role:edit">
            <Button icon={<EditOutlined />} onClick={() => handleButtonClick('编辑角色')}>
              编辑角色
            </Button>
          </PermissionGuard>

          <PermissionGuard permission="system:role:delete">
            <Button danger icon={<DeleteOutlined />} onClick={() => handleButtonClick('删除角色')}>
              删除角色
            </Button>
          </PermissionGuard>
        </Space>
      </Card>

      <Card title="组合权限测试" style={{ marginBottom: 24 }}>
        <Space direction="vertical" style={{ width: '100%' }} size="middle">
          <div>
            <h4>任意权限匹配 (any=true):</h4>
            <PermissionGuard
              permissions={['system:user:create', 'system:role:create']}
              any={true}
            >
              <Button type="primary">
                用户或角色创建权限 (满足其一即可)
              </Button>
            </PermissionGuard>
          </div>

          <div>
            <h4>全部权限匹配 (any=false):</h4>
            <PermissionGuard
              permissions={['system:user:create', 'system:role:create']}
            >
              <Button type="primary">
                同时拥有用户和角色创建权限
              </Button>
            </PermissionGuard>
          </div>
        </Space>
      </Card>

      <Card title="编程式权限检查">
        <Space direction="vertical" style={{ width: '100%' }} size="middle">
          <Alert
            message="用户列表权限"
            type={hasPermission('system:user:list') ? 'success' : 'error'}
            showIcon
            message={`system:user.list: ${hasPermission('system:user:list') ? '有权限' : '无权限'}`}
          />

          <Alert
            message="用户创建权限"
            type={hasPermission('system:user:create') ? 'success' : 'error'}
            showIcon
            message={`system:user:create: ${hasPermission('system:user:create') ? '有权限' : '无权限'}`}
          />

          <Alert
            message="任意用户管理权限"
            type={hasAnyPermission(['system:user:list', 'system:user:create']) ? 'success' : 'error'}
            showIcon
            message={`任意用户管理权限: ${hasAnyPermission(['system:user:list', 'system:user:create']) ? '有权限' : '无权限'}`}
          />

          <Alert
            message="全部用户管理权限"
            type={hasAllPermissions(['system:user:list', 'system:user:create']) ? 'success' : 'error'}
            showIcon
            message={`全部用户管理权限: ${hasAllPermissions(['system:user:list', 'system:user:create']) ? '有权限' : '无权限'}`}
          />
        </Space>
      </Card>
    </div>
  );
};

export default PermissionTestPage;